<template>
  <div>
    <span>{{hours}}</span>:
    <span>{{minutes}}</span>:
    <span>{{seconds}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hours: "",
      minutes: "",
      seconds: "",
    };
  },

  created() {
    setInterval(() => {
      let date = new Date();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      this.hours = hours;
      this.minutes = minutes < 10 ? `0${minutes}` : minutes;
      this.seconds = seconds < 10 ? `0${seconds}` : seconds;
    }, 1000);
  },
};
</script>

<style>
</style>